<template>
  <div class="order_detail_wrapper">
    <el-main v-loading="loading">
      <el-card class="mt10">
        <div class="clearfix">
          <span style="font-size: 16px;font-weight: bold">短信详情</span>
          <el-button style="float: right;" size="small" @click="$router.back()">返回</el-button>
        </div>
      </el-card>
      <el-card class="mt10">
        <el-descriptions title="详情">
          <el-descriptions-item label="任务名称">{{ detail.name }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="文案">{{ detail.content }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="发送时间">{{ detail.sendDate }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="发送人群">{{ detail.targetType === 1 ? detail.userTagId : detail.targetType === 3 ? userTypeList[+detail.specificUserType - 1].label : '自定义人群' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="mt10">
        <el-descriptions title="编辑记录" />
        <el-table :data="detail.records" :border="false">
          <el-table-column prop="operUserName" label="编辑人" />
          <el-table-column prop="createdTime" label="编辑时间" />
        </el-table>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { getManage } from '@/api/sms/template';
import { userTypeList } from '@/constants/sms';
const key = "express-set-key"

export default {
  data() {
    return {
      detail: {},
      loading: false,
      userTypeList,
    }
  },
  created() {
    const { id } = this.$route.query
    this.queryDetail(id)
  },
  methods: {
    async queryDetail(id) {
      this.loading = true
      const { code, data } = await getManage({ id })
      if (code !== 200) return;
      this.loading = false
      this.detail = data
    }
  }
}
</script>

<style lang="stylus">
.order_detail_wrapper
  > .el-card + .el-card
    margin-top 1rem

  .el-form-item
    margin-bottom 0

    .el-form-item__content, .el-form-item__label
      line-height 2

.my-label
  width 100px

.my-content
  width 400px

.popperOptions[x-placement^=left] .popper__arrow::after {
  border-left-color: #565D6B;
}
.vertical {
  display flex;
  flex-direction column;
  gap: 10px
}
.popperOptions[x-placement^=right] .popper__arrow::after {
  border-right-color: #565D6B;
}

.popperOptions[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #565D6B;
}

.popperOptions[x-placement^=top] .popper__arrow::after {
  border-top-color: #565D6B;
}

.popperOptions {
  background-color: #565D6B;
  color: #FFFFFF;
  border: #565D6B;
}

.el-timeline-item__content {
  color: #fff;
}

.el-timeline-item__timestamp {
  color: #fff;
}
</style>
